<template>
  <div>
    <hr />
    <el-button>xxx</el-button>
    <h1>input fileReader</h1>
    <input type="file" accept=".md,.png,.jpg" ref="inp" @change="getFiles" />
    <!-- accept 限制上传文件的类型 -->
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(window.FileReader);
  },
  methods: {
    getFiles() {
      console.log(this.$refs.inp.files);
      //当获取文件后可以通过FileReader的实例将其转换成我们需要的文件类型
      // 文本  DataURL 二进制

      //   DataURL
      let fr = new FileReader();
      //   通过FileReader实例对象上的readAsDataURL可以将文件读取为DataURL
      /* fr.readAsDataURL(this.$refs.inp.files[0]);
      fr.onload = function () {
        console.log(fr.result);
        // 变成base64字符串都是以data:开头的字符串
      }; */

      //   md文件变为文本上传服务器 md文件变为文本
      /* fr.readAsText(this.$refs.inp.files[0]);
      fr.onload = () => {
        console.log(fr.result);
      }; */
      // md文件变为文本上传服务器 md文件变为二进制文件
      fr.readAsBinaryString(this.$refs.inp.files[0]);
      fr.onload = () => {
        console.log(fr.result);
      };
    },
  },
};
</script>

<style lang="scss" scoped>
div {
  margin-top: 50px;
}
</style>